<template>
  <div>
    <vue-esign
      ref="esign"
      :width="800"
      :height="300"
      :is-crop="isCrop"
      :line-width="lineWidth"
      :line-color="lineColor"
      :bg-color.sync="bgColor"
    />
    <button @click="handleReset">清空画板</button>
    <button @click="handleGenerate">生成图片</button>
    <img :src="resultImg">
  </div>
</template>
<script>
import { Toast } from 'vant';
export default {
  data() {
    return {
      lineWidth: 6,
      lineColor: '#000000',
      bgColor: 'rgba(0,0,0,.1)',
      resultImg: '',
      isCrop: false
    };
  },
  methods: {
    handleReset() {
      this.$refs.esign.reset();
      this.resultImg = '';
    },
    handleGenerate() {
      this.$refs.esign
        .generate()
        .then(res => {
          this.resultImg = res;
          console.log(res);
        })
        .catch(err => {
          Toast(err, '没有签名'); // 画布没有签字时会执行这里
        });
    }
  }
};
</script>
<style scoped>
button {
  border: #f1f1f1 solid 1px;
  background: #2897ff;
  font-size: 14px;
  padding: 5px 10px;
  border-radius: 5px;
  color: #fff;
  margin-left: 20px;
}
img {
  max-width: 100%;
}
</style>
